<template>
  <div class="tableListBox">
    <div class="blueTitleView">
      <p class="titleview">项目商务人员信息表</p>
    </div>
    <div class="iuapContent">
      <div class="content-form">
        <IuapSearch
          :fromData="fromData"
          @searchFn="
            (e) => {
              this.searchFn(e);
            }
          "
          @reset="
            (e) => {
              this.reset(e);
            }
          "
        >
        </IuapSearch>
      </div>
      <div class="content-form__operation">
        <vxe-button status="primary" size="small" @click="exp">导出</vxe-button>
      </div>
      <div class="tableList">
        <div class="onlyTable">
          <vxe-grid
            class="table-normal"
            ref="table"
            resizable
            show-overflow
            row-key
            keep-source
            border="inner"
            :data="tableData"
            :columns="columns"
            max-height="100%"
          >
            <template #operation="{ row }">
              <vxe-button size="mini" status="info" @click="check(row)">查看</vxe-button>
            </template>
          </vxe-grid>
        </div>
        <vxe-pager
          background
          :current-page.sync="form.page"
          :page-size.sync="form.size"
          :total="total"
          :layouts="['Total', 'Sizes', 'PrevPage', 'JumpNumber', 'NextPage']"
          @page-change="pager"
        >
        </vxe-pager>
      </div>
    </div>
  </div>
</template>
<script>
import keyName from '../../util/keyName';
import CommonTable from './common.vue';
import User from '/@/components/User';
import SelectUser from './components/SelectFromTableDialog';
import AddUser from './components/AddFormDialog';
import IuapSearch from '/@/components/Iuap/IuapSearch.vue';
import VXETable from 'vxe-table';
import * as ExcelJS from 'exceljs';
export default {
  components: { CommonTable, User, SelectUser, AddUser, IuapSearch },
  data() {
    return {
      form: {
        vcode: '',
        vname: '',
        orgName: '',
        page: 1,
        size: 10,
      },
      columns: [
        {
          type: 'seq',
          width: 60,
          title: '序号',
        },
        {
          field: 'projectCode',
          title: '项目编码',
          editRender: {},
        },
        {
          field: 'projectName',
          title: '项目名称',
          editRender: {},
        },
        {
          field: 'orgName',
          title: '所属组织',
          editRender: {},
        },
        {
          field: 'psnCount',
          title: '商务人员数量',
          editRender: {},
        },
        {
          title: '操作',
          width: 180,
          headerAlign: 'left',
          slots: { default: 'operation' },
        },
      ],
      tableData: [],
      total: 0,
      fromData: [
        {
          name: '项目编码',
          key: 'vcode',
          type: 'input',
          value: '',
        },
        {
          name: '项目名称',
          key: 'vname',
          type: 'input',
          value: '',
        },
        {
          name: '所属组织',
          key: 'orgName',
          type: 'treeSelect',
          value: '',
          treeData: keyName.getTreeData('orgName'),
          defaultProps: { children: 'children', label: 'orgName', id: 'orgName' },
        },
      ],
    };
  },
  created() {
    this.getList();
  },
  methods: {
    async getList() {
      await this.$api.getProjectList(this.form).then((res) => {
        try {
          const { list, total } = res.data;
          this.tableData = list;
          this.total = total;
        } catch {}
      });
    },
    // 用于导出数据
    async getAllList() {
      // VXETable.modal.message({ content: '下载中', status: 'loading' });
      return await this.$api.getProjectList({ page: 1, size: 100000 }).then((res) => {
        try {
          const { list } = res.data;
          return list;
        } catch {}
      });
    },
    pager({ currentPage, pageSize }) {
      this.form.page = currentPage;
      this.form.size = pageSize;
      this.getList();
    },
    search() {
      this.form.page = 1;
      this.getList();
    },
    searchFn(e) {
      console.log(this.fromData);
      this.fromData.forEach((item) => {
        if (item.key == 'orgName') {
          if (item.value) {
            this.form.orgName = item.value;
          } else {
            this.form.orgName = '';
          }
        } else if (item.key == 'vcode') {
          if (item.value) {
            this.form.vcode = item.value;
          } else {
            this.form.vcode = '';
          }
        } else if (item.key == 'vname') {
          if (item.value) {
            this.form.vname = item.value;
          } else {
            this.form.vname = '';
          }
        }
      });
      this.form.page = 1;
      this.getList();
    },
    reset() {
      this.form = {
        vcode: '',
        vname: '',
        orgName: '',
        page: 1,
        size: 10,
      };
      this.getList();
    },
    async exp() {
      const result = await this.getAllList();
      this.$refs.table.exportData({
        filename: '项目人员商务人员信息表',
        sheetName: '项目人员商务人员信息表',
        type: 'xlsx',
        useStyle: true,
        columnFilterMethod: (column, $columnIndex) => {
          return !(column.$columnIndex === 0 || column.$columnIndex === 5);
        },
        data: result,
      });
    },
    check(row) {
      const { projectCode, projectName, orgName, psnCount: businessPersonnelAmount } = row;
      this.$router.push({
        path: '/staffList',
        query: { projectCode, projectName, belongOrganization: orgName, businessPersonnelAmount },
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.tableListBox {
  height: 100vh;
  ::v-deep {
    .vxe-form.outForm {
      .vxe-form--item-content {
        width: 280px;
      }
      .vxe-form--item {
        width: 28%;
      }
      .last-item {
        width: 16%;
        text-align: right;
      }
    }
    .vxe-table--body-wrapper {
      overflow-y: auto !important;
    }
    // .vxe-table--main-wrapper {
    //   height: calc(100vh - 70px);
    //   .vxe-table--body-wrapper {
    //     height: calc(100% - 50px);
    //   }
    // }
    .table-normal .vxe-header--row {
      height: 30px;
    }
    .vxe-button.type--button.theme--primary {
      height: 28px;
      font-size: 12px;
      background-color: rgb(31, 143, 255) !important;
    }
    .vxe-button.type--button.size--mini {
      height: 21px;
      line-height: 21px;
      font-size: 12px;
    }
    .vxe-form--item-title-label {
      font-size: 13px;
    }
    // .vxe-form .vxe-form--item .vxe-form--item-inner .vxe-form--item-content .vxe-input {
    //   height: 26px !important;
    //   line-height: 26px !important;
    // }
    .vxe-table--render-default .vxe-header--column:not(.col--ellipsis) {
      padding: 0 !important;
      font-size: 13px;
    }
    .vxe-table--render-default .vxe-body--column.col--ellipsis {
      height: 35px;
      font-size: 13px;
    }
    .vxe-button.type--text.theme--info {
      color: #06f;
      cursor: pointer;
      line-height: 1;
    }
    .vxe-button.type--button.size--mini.theme--info:not(.is--disabled) {
      background-color: #505766 !important;
      border-color: #505766 !important;
      // height: 20px;
      border-radius: 2px;
    }
    .vxe-button.type--button.size--small.theme--info:not(.is--disabled) {
      background-color: #505766 !important;
      border-color: #505766 !important;
      // height: 26px;
      border-radius: 2px;
    }
    .vxe-pager--wrapper button.is--active {
      background-color: #adb4bc !important;
      border-color: #adb4bc !important;
      box-shadow: none;
    }
    // .vxe-input {
    //   height: 20px;
    // }
    .vxe-pager--wrapper button {
      // width: 18px;
      // height: 18px;
      // line-height: 18px;
      // font-size: 12px;
    }
    // .vxe-pager {
    //   display: flex;
    //   position: absolute;
    //   bottom: 0;
    //   width: 100%;
    //   justify-content: flex-end;
    // }
  }
}
</style>
